<template>
  <div :style="{ width: '100%' }">
    <div :style="{ marginLeft: '1.76%', marginTop: (32 / 96) + 'rem', marginBottom: (32 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
      <span :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">基本信息</span>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginBottom: (19 / 96) + 'rem' }">
      <div :style="{ width: '97.68%', height: (1 / 96) + 'rem', background: '#EEEEEE', }"></div>
    </div>
    <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (16 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">头像</span>
      </div>
      <div :style="{ width: (110 / 96) + 'rem', height: (110 / 96) + 'rem', border: (2 / 96) + 'rem #EEEEEE solid', borderRadius: '100%', marginLeft: (212 / 96) + 'rem', cursor: 'pointer', position: 'relative' }">
        <input accept="image/png,image/jpg" type="file" id="tempUploadFile" :style="{ position: 'absolute', display: 'block', width: '100%', height: '100%', opacity: 0, cursor: 'pointer' }" @change="upLoad" />
        <img style="width: 100%; height: 100%; border-radius: 100%;" :src="personalImage" />
      </div>
    </div>
    <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (35 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">用户名</span>
      </div>
      <div :style="{ width: (569 / 96) + 'rem', height: (48 / 96) + 'rem', background: '#EEEEEE', borderRadius: (4 / 96) + 'rem', marginLeft: (92 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
        <input :style="{ width: (507 / 96) + 'rem', height: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }" placeholder="请输入用户名" v-model="userName" />
      </div>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (50 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">性别</span>
      </div>
      <radio :radioId="radioId" :radioList="radioList" @radioClick="radioClick"></radio>
    </div>
    <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (63 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">手机号</span>
      </div>
      <div v-if="telphoneType" :style="{ marginLeft: (122 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">{{ telphone }}</span>
      </div>
      <div v-if="telphoneType" @click="toPhoneClick" :style="{ marginLeft: (58 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
        <span :style="{ fontSize: (18 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#C67F01', lineHeight: (24 / 96) + 'rem', opacity: 0.8 }">修改</span>
      </div>
      <div v-if="!telphoneType" @click="toPhoneClick" :style="{ marginLeft: (122 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
        <span :style="{ fontSize: (18 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#C67F01', lineHeight: (24 / 96) + 'rem', opacity: 0.8 }">去绑定</span>
      </div>
    </div>
    <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: (69 / 96) + 'rem' }">
      <div :style="{ marginLeft: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">邮箱账号</span>
      </div>
      <div v-if="emailType" :style="{ marginLeft: (104 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">{{ email }}</span>
      </div>
      <div v-if="emailType" @click="toEmailClick" :style="{ marginLeft: (58 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
        <span :style="{ fontSize: (18 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#C67F01', lineHeight: (24 / 96) + 'rem', opacity: 0.8 }">修改</span>
      </div>
      <div v-if="!emailType" @click="toEmailClick" :style="{ marginLeft: (104 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
        <span :style="{ fontSize: (18 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#C67F01', lineHeight: (24 / 96) + 'rem', opacity: 0.8 }">去绑定</span>
      </div>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
      <div @click="toSaveClick" :style="{ width: (80 / 96) + 'rem', height: (38 / 96) + 'rem', background: '#6168FE', borderRadius: (19 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
        <span :style="{ fontSize: (22 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#FEFEFE', lineHeight: (24 / 96) + 'rem' }">保存</span>
      </div>
    </div>
  </div>
</template>

<script>
  import  {pageResize} from '../../utils/resetScreenSize.js'
  import commonUtil from '../../utils/common'
  import Radio from '../../components/Radio'
  export default {
    name: 'PersonalData',
    components: {
      Radio: Radio
    },
    data() {
      return {
        personalImage: "http://bggkpsh.oss-cn-beijing.aliyuncs.com/uploadFile4a4b73df-bd49-4fb1-9906-d4b2f54545de.png",
        userName: "啵啵",
        fileList: [],
        formData: null,
        radioList: [
          {
            id: 1,
            title: "男"
          },
          {
            id: 2,
            title: "女"
          }
        ],
        radioId: 1,
        telphone: "18315460138",
        email: "1234567899@qq.com",
        telphoneType: true,
        emailType: false
      }
    },
    mounted() {
      pageResize();
    },
    methods: {
      radioClick(id) {
        this.radioId = id;
      },
      toPhoneClick() {
        this.$router.push({name: 'UnbindPhone', params: {}});
        window.document.title = '手机解绑';
      },
      toEmailClick() {
        this.$router.push({name: 'BindEmail', params: {}});
        window.document.title = '邮箱绑定';
      },
      toSaveClick() {
        // console.log(this.personalImage);
        // console.log(this.userName);
        // console.log(this.radioId);
        // console.log(this.telphone);
        // console.log(this.email);
        if(!commonUtil.trim(this.userName)) {
          this.$toast("请输入用户名");
        }
        // 接口调用
      },
      upLoad(e) {
        let file = e.target.files[0];
        let name = this.guid() + '_' + this.guid() + '_' + this.guid() + '_' + new Date().getTime();
        // let key = this.uploadInfo.dir + '/web-' + name;
        let form = new FormData();
        form.append('name', name);
        // form.append('key', key);
        // form.append('policy', this.uploadInfo.policy);
        // form.append('OSSAccessKeyId', this.uploadInfo.accessid);
        // form.append('success_action_status', '200');
        // form.append('signature', this.uploadInfo.signature);
        form.append('file', file);
        // console.log('form.name: ', form.get('name'));
        // console.log('form.file: ', form.get('file'));
        // let xhr = new XMLHttpRequest();
        // xhr.open('post', this.uploadInfo.host);
        // xhr.send(form);
        // this.observer.next();
        // xhr.onreadystatechange = () => {
        //   // 这步为判断服务器是否正确响应
        //   if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 204)) {
        //     this.observer.complete(this.uploadInfo.host + '/' + key);
        //   } else {
        //     if (xhr.readyState === 4) {
        //       this.observer.error();
        //     }
        //   }
        // }
        let reader = new FileReader();
        let that = this;
        reader.readAsDataURL(file);
        reader.onload = function(e) {
          // console.log(e);
          // console.log(this);
          that.personalImage = this.result;
        }
      },
      guid () {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
    },
    activated () {
      window.document.title = '个人资料';
      let getUserInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.userName = getUserInfo.nickname;
      this.personalImage = getUserInfo.face ? getUserInfo.face : "../../static/user_head_default.png";
      this.telphone = getUserInfo.mobile;
      this.radioId = getUserInfo.sex ? getUserInfo.sex : 0;
    }
  }
</script>

<style scoped>
  :-moz-placeholder {
    font-family: FZKai-Z03S;
    font-weight: 400;
    color: #333333;
    opacity: 1;
  }

  ::-moz-placeholder {
    font-family: FZKai-Z03S;
    font-weight: 400;
    color: #333333;
    opacity: 1;
  }

  input:-ms-input-placeholder {
    font-family: FZKai-Z03S;
    font-weight: 400;
    color: #333333;
    opacity: 1;
  }

  input::-webkit-input-placeholder {
    font-family: FZKai-Z03S;
    font-weight: 400;
    color: #333333;
    opacity: 1;
  }
</style>
